<template>
  <div>
    <TopNav></TopNav>
    <div style="clear:both;"></div>
    <HeaderLogo></HeaderLogo>
    <div style="clear:both;"></div>
    <!-- 正文 -->
      <!-- 登录主体部分start -->
  <div class="login w990 bc mt10 regist">
    <div class="login_hd">
      <h2>用户注册</h2>
      <b></b>
    </div>
    <div class="login_bd">
      <div class="login_form fl">
        <form action="" method="post">
          <ul>
            <li>
              <label for="">用户名：</label>
              <input type="text" class="txt" name="username" v-model="user.username" @blur="checkUsernameFn" />
              <p>3-20位字符，可由中文、字母、数字和下划线组成</p>
              <p :class="userMsg.usernameData.code == 1 ? 'success' : 'error'">{{userMsg.usernameData.message}}</p>
            </li>
            <li>
              <label for="">密码：</label>
              <input type="password" class="txt" name="password" v-model="user.password" />
              <p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
            </li>
            <li>
              <label for="">确认密码：</label>
              <input type="password" class="txt" name="password" />
              <p>请再次输入密码</p>
            </li>
            <li>
              <label for="">手机号码：</label>
              <input type="text" class="txt"  name="mobile" v-model="user.mobile" @blur="checkMobileFn" />
              <p>请输入手机号码</p>
              <p :class="userMsg.mobileData.code == 1 ? 'success' : 'error'">{{userMsg.mobileData.message}}</p>
            </li>
            <li class="checkcode">
              <label for="">验证码：</label>
              <input type="text"  name="checkcode" v-model="user.code" />
              <button :disabled="btbDisavled" @click.prevent="sendSmsFn">
                发送验证码<span v-show="btbDisavled">{{seconds}}</span>
              </button>
              <p :class="userMsg.smsData.code == 1 ? 'success' : 'error'">{{userMsg.smsData.message}}</p>
            </li>
            <li>
              <label for="">&nbsp;</label>
              <input type="checkbox" class="chb" checked="checked" /> 我已阅读并同意《用户注册协议》
            </li>
            <li>
              <label for="">&nbsp;</label>
              <input type="submit" value="" class="login_btn" @click.prevent="registerFn"  />
            </li>
          </ul>
        </form>
      </div>
      <div class="mobile fl">
        <h3>手机快速注册</h3>
        <p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>
        <p><strong>1069099988</strong></p>
      </div>

    </div>
  </div>
  <!-- 登录主体部分end -->
    <div style="clear:both;"></div>
    <Footer></Footer>
    
  </div>
</template>

<script>
import TopNav from '../components/TopNav'
import HeaderLogo from '../components/HeaderLogo'
import Footer from '../components/Footer'
export default {
  head: {
    title: '用户注册',
    link: [
      {rel:'stylesheet',href:'style/login.css'}
    ],
    script: [
      { type: 'text/javascript', src: 'js/header.js' },
      { type: 'text/javascript', src: 'js/index.js' },
    ]
  },
  components : {
    TopNav,
    HeaderLogo,
    Footer
  },
  data() {
    return {
     user : {         //表单绑定对象
       username : "" , //用户名
       mobile : "", //手机号
       password : "", //密码
       code : "", //验证码
     },
     userMsg : {      //错误信息
      usernameData : "", //校验用户名
      mobileData : "",  //校验手机号
      smsData : "" , //发送验证码，返回信息
     },
     btbDisavled : false, //倒计时控制变量,默认为false 为可点击
     seconds : 5,         //默认倒计时秒数
     timer : null ,       //接收定时器,清除定时器
    }
  },
  methods: {
    async checkUsernameFn(){
      if(this.user.username){
        let {data} = await this.$request.checkUsername(this.user.username)
        this.userMsg.usernameData = data
      }
    },
    async checkMobileFn(){
      //检查电话
      let {data} = await this.$request.checkMobile(this.user.mobile)
      this.userMsg.mobileData = data
    },
    //发送验证码
    sendSmsFn(){
      this.$request.sendSms(this.user)
      .then((response)=>{
        //发送短信的提示信息
        this.userMsg.smsData = response.data
        //按钮不可用
        this.btbDisavled = true
        //倒计时
        this.timer = setInterval(()=>{
          if(this.seconds <= 1){
            //结束
            //重置秒数
            this.seconds = 5;
            //按钮可用
            this.btbDisavled = false
            //停止定时器
            clearInterval(this.timer)
          }else {
            this.seconds--;
          }
        },1000)
      })
      .catch((error)=>{
        //错误提示信息
        alert(error.message)
      })
    },
    async registerFn(){
      let {data} = await this.$request.register(this.user)
      if(data.code == 1){
        //成功
        this.$router.push('/login')
      }else {
        //失败--与发送验证码使用一个位置显示错误信息
        this.userMsg.smsData = data
      }
    }
  },
}
</script>

<style>

</style>
